<template>
	<el-dialog title="组别" :visible.sync="relationGroupDialogVisible"
		:width="groupRelationRequest.type===1?'20%':'60%'" append-to-body center @closed="closeRelationGroupDialog">
		<el-form ref="cuForm" size="mini" :model="groupRelationRequest" :rules="groupRelationRequestRules">
			<el-form-item label="类型" prop="type" v-if="!isEdit">
				<el-radio-group v-model="groupRelationRequest.type" @change="typeChange">
					<el-radio :label="1">已有分组</el-radio>
					<el-radio :label="2">新建分组</el-radio>
				</el-radio-group>
			</el-form-item>
			<div v-if="isEdit || (!isEdit && groupRelationRequest.type == 2)">
				<relation-group-edit-component ref="RelationGroupEditComponentRef"></relation-group-edit-component>
			</div>
			<div v-if="(!isEdit && groupRelationRequest.type == 1)">
				<el-form-item label="组别" prop="group_id">
					<el-select v-loading="selectLoading" v-model="groupRelationRequest.group_id" placeholder="请选择组别"
						clearable filterable>
						<el-tooltip v-for="group in groupArr" :key="group.id" effect="dark" placement="right">
							<div slot="content">
								<div>组别所含销售单信息</div>
								<div v-for="(item,index) in group.saleVOList" :key="group.id+''+index">
									{{ item.contract_num + '——' + item.actual_execute_time_start + '~' + item.actual_execute_time_end }}
								</div>
							</div>
							<el-option :label="group.name" :value="group.id"></el-option>
						</el-tooltip>
					</el-select>
				</el-form-item>
			</div>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="relationGroupDialogVisible = false">取 消</el-button>
			<el-button size="mini" type="primary" @click="submitForm">提 交</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		cloneDeep
	} from 'lodash';
	import {
		relation,
		list_by_dto
	} from '@/api/saleOrder/bill_sale_group';
	import RelationGroupEditComponent from './RelationGroupEditComponent.vue';
	export default {
		name: 'sale-order-relation-group-dialog',
		components: {
			RelationGroupEditComponent
		},
		props: {
			isEdit: { // 是否为编辑分组
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				relationGroupDialogVisible: false,
				selectLoading: false,

				optionData: [],
				groupArr: [],

				groupRelationRequest: {
					name: null,
					customer_id: null,
					account_received_id: null,
					type: 1,
					bill_sale_ids: [],
					group_id: null,
					edit_group_id: null,
					edit_group_name: null
				},

				groupRelationRequestRules: {
					type: [{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}],
				},
			}
		},
		watch: {},
		mounted() {},
		methods: {
			openThis(data) {
				this.groupRelationRequest.account_received_id = data.account_received_id || null;
				this.groupRelationRequest.customer_id = data.customer_id || null;
				this.groupRelationRequest.bill_sale_ids = data.bill_sale_ids || [];
				this.groupRelationRequest.edit_group_id = data.edit_group_id || null;
				this.groupRelationRequest.edit_group_name = data.edit_group_name || null;
				this.groupRelationRequest.type = data.type || 1;
				this.relationGroupDialogVisible = true;
				this.$nextTick(() => {
					this.typeChange(this.groupRelationRequest.type);
				})
			},
			closeRelationGroupDialog() {
				this.groupRelationRequest = {
					name: null,
					customer_id: null,
					account_received_id: null,
					type: 1,
					bill_sale_ids: [],
					group_id: null,
					edit_group_id: null,
					edit_group_name: null
				};
				this.$nextTick(() => {
					this.$refs.cuForm.clearValidate();
				});
			},
			typeChange(val) {
				if (val === 1) {
					this.groupRelationRequest.bill_sale_ids = [];
					this.groupRelationRequest.name = null;
					this.getGroupArr();
				} else {
					this.groupRelationRequest.group_id = null;
					this.$refs.RelationGroupEditComponentRef.initThis(this.groupRelationRequest);
				}
				this.$nextTick(() => {
					this.$refs.cuForm.clearValidate();
				});
			},
			getGroupArr() {
				this.selectLoading = true
				list_by_dto({
					customer_id: this.groupRelationRequest.customer_id
				}).then(res => {
					this.selectLoading = false;
					this.groupArr = res.data;
				}).catch(() => {

				});
			},
			async submitForm() {
				const that = this;
				if (that.groupRelationRequest.type == 2) {
					const type2Data = await that.$refs.RelationGroupEditComponentRef.getData();
					if (!type2Data) return;
					that.groupRelationRequest.name = type2Data.name || [];
					that.groupRelationRequest.bill_sale_ids = type2Data.bill_sale_ids || [];
				}
				const confirm = await common.confirmDialog(that.groupRelationRequest.edit_group_id?'确定提交？':'合成一组以后只能由财务修改，确定继续？');
				if (confirm) {
					const loading = common.showLoading({
						text: '提交中'
					});
					relation(that.groupRelationRequest).then(res => {
						common.messageSuccess('操作成功');
						that.relationGroupDialogVisible = false;
						that.$emit('relationSubmitted');
						loading.close();
					}).catch(() => {
						loading.close();
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/deep/ .el-transfer-panel {
  width: 400px;
}
</style>
